<template>
    <div class="app-container">
        <el-card>
            <div>
               <el-form ref="form" :model="form" label-width="100px">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="搜索客户：" size="small" > <el-input v-model="model"  suffix-icon="el-icon-search"></el-input> </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属客服：" size="small"> <el-input v-model="model"></el-input> </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="企业标签：" size="small"> <el-input v-model="model"></el-input> </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="添加渠道：" size="small" > <el-input v-model="model"></el-input> </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="添加时间：" size="small" style="margin-bottom:0"> 
                                <el-date-picker type="daterange" placeholder="选择日期" v-model="form.date1" style="width: 100%;" 
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"></el-date-picker>
                             </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别：" size="small" style="margin-bottom:0">
                                 <el-select v-model="form.region" placeholder="请选择性别">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="流失状态：" size="small" style="margin-bottom:0"> 
                                 <el-select v-model="form.region" placeholder="请选择流失状态">
                                    <el-option label="已流失" value="1"></el-option>
                                    <el-option label="未流失" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item style="text-align:right;margin-bottom:0"><el-button @click="resetForm('ruleForm')" size="small">重置</el-button></el-form-item>
                        </el-col>
                    </el-row>
               </el-form>
            </div>
        </el-card>
        <el-card style="margin-top:15px">
             <div class="el-flex">
                <div class="el-flex-1">
                    <span>共9个客户</span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="cursor: pointer;"><i class="el-icon-refresh"></i>刷新</span> 

                </div>
                <el-button type="primary" size="small" plain>页面设置</el-button>
                <el-button type="primary" size="small" plain>批量修改评分</el-button>
                <el-button type="primary" size="small" plain>批量打标签</el-button>
                <el-button type="success" size="small" plain>导出excel</el-button>
            </div>
            <el-table :data="list" style="width: 100%;margin-top:15px" size="small" @selection-change="handleSelectionChange"  ref="multipleTable">
                <el-table-column type="selection"  width="55" fixed>  </el-table-column>
                <el-table-column prop="userName"  label="选择全部客户" [{text: '全部', value: '全部'}, {text: '当前页面', value: '当前页面'}]> </el-table-column>
                <el-table-column prop="serve"  label="所属客服"  > </el-table-column>
                <el-table-column prop="bumen"  label="客服所属部门"  > </el-table-column>
                <el-table-column prop="pf"  label="客户评分"  > </el-table-column>
                <el-table-column prop="jf"  label="客户积分"  > </el-table-column>
                <el-table-column prop="tag"  label="标签"  > </el-table-column>
                <el-table-column prop="state"  label="客户状态"  > </el-table-column>
                <el-table-column prop="time"  label="添加时间"  > </el-table-column>
                <el-table-column prop="lasTime"  label="上次对话时间"  > </el-table-column>
                <el-table-column prop="qd"  label="添加渠道"  > </el-table-column>
                <el-table-column   label="操作" align="right" width="200px" fixed="right">
                   <template slot-scope="{row}">
                      <el-button type="text" size="small" @click="dialogVisible=true">加入黑名单</el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-button type="text" size="small" disabled>聊天记录</el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-button type="text" size="small">详情</el-button>
                   </template>
                </el-table-column>
                <div slot="empty">
                    <el-empty description="暂无数据~"></el-empty>
                </div>
            </el-table>
        </el-card>
        <el-dialog
            title="拉黑原因"
            :visible.sync="dialogVisible"
            width="520px"
            :before-close="dialogBeforeClose">
            <div>
                <el-tag size="small" style="width:100%"><i class="el-icon-message-solid"></i>   用户被拉黑后将无法参与营销活动</el-tag>
            </div>
            <el-input size="small"  type="textarea"  placeholder="请输入内容" style="margin-top:15px;" v-model="textarea" maxlength="50" show-word-limit class="" 
:rows="5" resize="none"/>
            <div slot="footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"  size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data(){
      return{
        list:[
            {
                userName:'杨红玲',
                serve:'dadada',
                bumen:'有关部门',
                pf:'20',
                jf:'20',
                tag:'20',
                state:'20',
                time:'2021-12-19 14:47',
                lasTime:'2021-12-19 14:47',
                qd:'通过渠道码 个人微信-朋友圈-2.29活动 添加',
            }
        ],
        dialogVisible:false,
        textarea:'',
        form:{}
      }
  }
}
</script>

<style>
   
</style>